@inherits LayoutComponentBase
@using Shapes

<div class="sidebar" style="overflow:auto">
    <!--SideTopBar-->
    <NavMenu ToggleNavMenuChanged="Redraw" SlideInSideBarTriggered="LaunchSlideInSideBar" />

</div>
<div class="big-main-container" style="width:100%">
    <!--TopBar-->
    <!--
    <div class="big-main-container" style="width:100%" onclick=HideSlideInSideBar>
        <div id="top-bar" class=(BlazorDashboard.XSingleton.NavBarDisplay ? "top-rowx" : "top-rowx-blank")>

        -->
    <div id="top-bar" class=@(BlazorDashboard.XSingleton.NavBarDisplay ? "top-rowx" : "top-rowx-blank" )>
        <nav id="nav-menux" class="navbar navbar-expand navbar-light bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="collapsingNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown action">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"><span class="oi oi-pencil" aria-hidden="true"></span> Actions</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Report</a>
                            <a class="dropdown-item" href="#">Resend</a>
                            <a class="dropdown-item" href="#">Upgrade</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown action">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"><span class="oi oi-file" aria-hidden="true"></span> Reports</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Sales Report</a>
                            <a class="dropdown-item" href="#">Profit Report</a>
                            <a class="dropdown-item" href="#">Region</a>
                        </div>
                    </li>
                </ul>

                <!--
                https://github.com/hjnilsson/country-flags
                -->


                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link bell" href="#"><span class="oi oi-bell" aria-hidden="true"></span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link flag" href="#"><div class="ml-auto"><img src="images/us.png" width="25" height="25" class="rounded-circle"></div></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link user" href="#"><div class="ml-auto"><img src="images/person3.png" width="35" height="35" class="rounded-circle" style="margin-top:-1px"></div></a>
                    </li>

                </ul>


            </div>

        </nav>

    </div>

    <div id="sidebar-main-container" class=@navstring style="background:#e9ecef">
        <!--
        <div id="sidebar-main-container" class=navstring style="background:#e9ecef">
            style="background:#e9ecef;"
        <div class="slidesidebar">
            <NavMenu SlideIn="true" CollapseSideMenu="false" />
        </div>
            -->
        <!--SlideInSideBar-->
        <nav id="nav-menu" class="sidebar-nav ind" style="margin-top:-6px">
            <div class="top-row pl-4 navbar navbar-dark">
                <a class="navbar-brand" href="">BLAZOR DASHBOARD</a>
            </div>
            <div id="inner-nav-menu" class="" style="overflow:auto">
                <ul class="nav flex-column">
                    <li class="nav-item-side px-3">
                        <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
                            <span class="oi oi-home" aria-hidden="true"></span> Home
                        </NavLink>
                    </li>

                    <li class="nav-item-side px-3">
                        <NavLink class="nav-link" href="counter">
                            <span class="oi oi-plus" aria-hidden="true"></span> Counter
                        </NavLink>
                    </li>
                    <li class="nav-item-side px-3">
                        <NavLink class="nav-link" href="fetchdata">
                            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                        </NavLink>
                    </li>
                    <!--

                    <li class="nav-item-side px-3">
                        <NavLink class="nav-link" href="fetchdata">
                            <span class="oi oi-list-rich" aria-hidden="true"></span> Counter
                        </NavLink>
                        <ul style="display:block">
                            <li style="color:white">
                                Submenu 1
                            </li>
                            <li style="color:white">
                                Submenu 2
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item-side px-3">
                        <NavLink class="nav-link" href="fetchdata">
                            <span class="oi oi-list-rich" aria-hidden="true"></span> Counter
                        </NavLink>
                        <ul style="display:block">
                            <li style="color:white">
                                Submenu 1
                            </li>
                            <li style="color:white">
                                Submenu 2
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item-side px-3">
                        <NavLink class="nav-link" href="fetchdata">
                            <span class="oi oi-list-rich" aria-hidden="true"></span> Counter
                        </NavLink>
                        <ul style="display:block">
                            <li style="color:white">
                                Submenu 1
                            </li>
                            <li style="color:white">
                                Submenu 2
                            </li>
                        </ul>
                    </li>
                        -->

                </ul>
            </div>
        </nav>


        <div class="main sidebar-cover" onclick=@HideSlideInSideBar>
                <div class="content px-4">
                    @Body
                </div>
        </div>

    </div>
</div>


@functions {

    //Rectangle rect= new Rectangle { Width=5.0,Height=5.0};
    
    //string TitleValue="Hello Title";

    bool slideIn=false;
    string navstring="sidebar-main-container";
    /*
    public async static Task SayHello()
    {
        await JSRuntime.Current.InvokeAsync<bool>
    ("SayHello");
    }
    */
    void Redraw()
    {
    StateHasChanged();
    }

    void LaunchSlideInSideBar()
    {
    //StateHasChanged();
    Console.WriteLine("LaunchSlideInSideBar");
    navstring="sidebar-main-container sidebar-nav-open";
    slideIn=true;
    }
    void HideSlideInSideBar()
    {
    //StateHasChanged();
    //watch for #1073 preventDefault
    Console.WriteLine("HideSlideInSideBar");
    if (slideIn)
    {
    navstring="sidebar-main-container";
    slideIn=false;
    }
    }

    }
